【Lua】用 Fengari 讓 Lua 取代 JavaScript 吧！

javascript lua fengari

Felix 2022-03-02 03:45:01 ‧ 1149 瀏覽

分享至

大家好！

眾所皆知，能開發網頁的動態程式語言以 JavaScript 為首選，畢竟幾乎所有瀏覽器都支援。
然而，因為原生 JavaScript 有缺陷，有時不得不使用框架和函式庫來輔助。
剛好最近正在學習 Lua 的語法，也因此產生這次發文的動機，那麼我們趕緊進入主題吧！

Fengari

Fengari 是能讓 Lua 在瀏覽器內執行的 JavaScript 專案，特色是採用 JavaScript 的垃圾回收機制，因此與 DOM 之間的操作不會造成記憶體洩漏。

Fengari 有個名為 js 的模組，能模擬 JavaScript 的行為，例如下方等價的程式碼：

const str = new Date().toLocaleString('zh-Hant-TW', {
    dateStyle: 'full',
    timeStyle: 'medium'
});

str; // 2022年3月2日 星期三 03:45:00
console.log(str); // Log: 2022年3月2日 星期三 03:45:00

local js = require('js')
local window = js.global
local str = js.new(window.Date):toLocaleString('zh-Hant-TW', {
    dateStyle = 'full',
    timeStyle = 'medium'
})

print(str) -- 2022年3月2日 星期三 03:45:00
window.console:log(str) -- Log: 2022年3月2日 星期三 03:45:00

原生 JavaScript 的 Date 方法會根據系統來變更時間字串的格式，如果要自訂統一格式的時間字串，可能需要函式庫的輔助，或是自行編寫函式才行。

然而，這時使用 Lua 就有極大的好處：

local str = os.date('%Y-%m-%d %H:%M:%S')

print(str) -- 2022-03-02 03:45:00
window.console:log(str) -- Log: 2022-03-02 03:45:00

是不是很簡單呢？
如果能同時選擇 Lua 和 JavaScript 各自的優勢來使用，開發網頁也應該不是什麼難事了。

不過，其實 Fengari 對於 JavaScript 也只是框架而已。

程式碼

local js = require('js')
local window = js.global
local datetime = os.date('%Y-%m-%d %H:%M:%S')
local nickname = window:prompt('Please enter your nickname')
local document = window.document

if nickname == '' or nickname == js.null then nickname = 'unknown' end
nickname = nickname:gsub('^%l', string.upper)

document:getElementById('info').innerHTML = '<ul><li>Nickname: ' .. nickname .. '</li><li>Datetime: ' .. datetime .. '</li></ul>'

實測

<head>
    <title>Lua Demo</title>
    <script type="text/javascript" src="https://github.com/fengari-lua/fengari-web/releases/download/v0.1.4/fengari-web.js"></script>
</head>

<body>
    <article>
        <h1>Lua Demo</h1>
        <p id="info"></p>
        <p>This demo is programmed by <a href="https://www.lua.org/" target="_blank">Lua</a> and powered by <a href="https://fengari.io/" target="_blank">Fengari</a>.</p>
    </article>
    <script type="application/lua">
    <!-- 請放置上方 Lua 程式碼 -->
    </script>
</body>

直接觀看範例

差不多也到尾聲了。
如果對文章有任何疑問，也歡迎在下方提問和建議！
我是 Felix，我們未來再見！